<template>
  <div id="write">
    <div style="margin-bottom: 10px">
      <el-button class="submitTopic" type="primary" @click="submit"
        >提交</el-button
      >
      <el-input
        placeholder="请输入内容"
        v-model="title"
        maxlength="50"
        show-word-limit
      >
        <template slot="prepend">标题</template>
      </el-input>
    </div>
    <!-- 直接隐藏掉就好了，用功能不用样式 -->
    <el-upload
      v-show="false"
      id="quill-upload"
      action="http://localhost:8080/uploadimg"
      name="upload_file"
      multiple
      :limit="3"
      list-type="picture"
      :show-file-list="false"
      :before-upload="beforeUpload"
      :on-error="uploadError"
      :on-success="handleExceed"
    >
      <!-- <el-button size="small" type="primary"></el-button>
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div> -->
    </el-upload>
    <el-row v-loading="uillUpdateImg">
      <quillEditor
        ref="myQuillEditor"
        @change="onEditorChange($event)"
        v-model="value"
        :options="editorOption"
      />
    </el-row>
  </div>
</template>
<script>
import { postTopic } from "../../api/topic";
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  name: "richText",
  components: { quillEditor },
  // props: ["content"], //父组件传过来的，将传过来的渲染到富文本编辑器
  data() {
    return {
      title: "",
      uillUpdateImg: false, //根据图片上传状态来确定是否显示loading动画
      serverUrl: "", //上传的图片服务器地址
      // value: this.content, //富文本内容
      value: "",
      editorOption: {
        //符文本编辑器的配置
        placeholder: "",
        theme: "snow",
        modules: {
          toolbar: {
            container: [
              // 工具栏配置, 默认是全部
              ["bold"],
              ["italic"],
              ["underline"],
              ["strike"],
              [{ list: "ordered" }, { list: "bullet" }],
              ["blockquote"],
              ["code-block"],
              ["link"],
              ["image"],
            ],
            handlers: {
              image: function (value) {
                if (value) {
                  // 给个点击触发Element-ui，input框选择图片文件
                  document.querySelector("#quill-upload input").click();
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
        },
      },
    };
  },
  methods: {
    submit() {
      var that = this;
      var data = {
        title: this.title,
        content: this.value,
        uid: localStorage.getItem("uid"),
      };
      // 判断标题
      if (data.title.length == 0) {
        this.$message.info("标题不能为空");
        return;
      }
      if (data.title.length > 50) {
        this.$message.info("标题不能超过50字");
        return;
      }

      // 判断内容长度
      var d = document.createElement("div");
      d.innerHTML = data.content;
      let text = d.innerText;
      if (text.length < 50) {
        this.$message.info("内容不能少于50字");
        return;
      }

      postTopic(data).then((res) => {
        console.log(res);
        if (res.code == 200) {
          that.$message.success(res.mess);
          that.$router.push("/");
        } else {
          that.$message.error(res.mess);
        }
      });
    },

    // **************************************************************************************
    onEditorChange({ quill, html, text }) {
      //富文本编辑器内容发生改变的时候
      this.value = html;
      // this.$emit("textChange", html); //将富文本编辑器输入的文本发送给父组件，父组件涉及提交添加或者更改
      console.log(this.value);
    },
    beforeUpload() {
      //上传图片之前开启loading
      this.uillUpdateImg = true;
    },
    uploadError() {
      //图片上传失败,关闭loading
      this.uillUpdateImg = false;
      this.$message.error("图片插入失败");
    },
    handleExceed(response, file, fileList) {
      //图片添加成功
      let quill = this.$refs.myQuillEditor.quill;
      console.log(response);
      if (response.code === 200) {
        let length = quill.getSelection().index;
        // 插入图片 response.data.url为服务器返回的图片地址
        quill.insertEmbed(length, "image", response.data);
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        this.$message.error("图片插入失败");
      }
      this.fileList = fileList;
      this.uillUpdateImg = false;
    },
  },
};
</script>
<style scoped>
.submitTopic {
  float: right;
  margin: 10px 10px 10px 0px;
}
#write {
  width: 70%;
  margin: 0 auto;
}
#write > div {
  background-color: #ffffff;
}
/* .write >>> img {
  width: 200px;
  height: 200px;
} */
#write >>> .ql-editor {
  min-height: 500px;
  color: black;
}
</style>